﻿@{
    ViewBag.Title = "Grid : Client Side Sorting";
}

<h2>Grid : Client Side Sorting</h2>

<h3>Sample</h3>

@{
    Html.Telerik().Grid<TelerikMvcClientApi.Models.Product>()
        .Name("MyGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Name);
            columns.Bound(c => c.Category);
            columns.Bound(c => c.SubCategory).Width(400);
            columns.Bound(c => c.Controls).Title("Controls/Features").ClientTemplate("<#= Controls==0?'':Controls #>");
        })
        .DataBinding(dataBinding => dataBinding.Ajax().Select("SelectProducts", "Grid"))
        .Scrollable(s => s.Height("auto"))
        .Selectable()
        .ClientEvents(events => events.OnLoad("MyGrid_onLoad"))
        .Render();
}

<script type="text/javascript">
    MyGrid_onLoad = function (e) {
        $(e.target).data('tGrid').enableRowDblClick({
            callback: function (grid) {
                var tr = grid.$tbody.find('tr.t-state-selected');
                alert('You double-clicked: ' + grid.dataItem(tr).Name);
            }
        });
    }
</script>
